<template>
  <div class="sidebar">
    <div class="sidebar-top-space"></div>
    <div class="menu-item" :class="{ active: currentRoute === '/' }" @click="navigateTo('/')">
      <img src="../assets/icons/首页.svg" alt="首页" class="icon" />
      <span>首页</span>
    </div>
    <div class="menu-item" :class="{ active: currentRoute === '/bidding-library' }" @click="navigateTo('/bidding-library')">
      <img src="../assets/icons/招标库.svg" alt="招标库" class="icon" />
      <span>招标库</span>
    </div>
    <div class="menu-item-dropdown">
      <div class="menu-item" @click="toggleDropdown">
        <img src="../assets/icons/个人.svg" alt="个人中心" class="icon" />
        <span>个人中心</span>
        <span class="dropdown-arrow" :class="{ open: isDropdownOpen }"></span>
      </div>
      <div v-if="isDropdownOpen" class="dropdown-content">
        <div class="dropdown-item" :class="{ active: currentRoute === '/user-settings' }" @click="navigateTo('/user-settings')">
          <span>基础信息</span>
        </div>
        <div class="dropdown-item" :class="{ active: currentRoute === '/privacy-policy' }" @click="navigateTo('/privacy-policy')">
          <span>隐私协议</span>
        </div>
        <div class="dropdown-item" :class="{ active: currentRoute === '/user-agreement' }" @click="navigateTo('/user-agreement')">
          <span>用户协议</span>
        </div>
        <div class="dropdown-item" @click="logout">
          <span>退出登录</span>
        </div>
      </div>
    </div>
    <div class="menu-item" :class="{ active: currentRoute === '/notification' }" @click="navigateTo('/notification')">
      <img src="../assets/icons/通知.svg" alt="通知" class="icon" />
      <span>通知</span>
    </div>
    
    <!-- 用户信息显示 -->
    <div class="user-info">
      <div class="user-phone">{{ userPhone }}</div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch, inject, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

export default {
  name: 'SidebarNav',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const auth = inject('auth');
    const currentRoute = ref(route.path);
    // 从localStorage获取下拉菜单状态，如果没有则默认为false
    const isDropdownOpen = ref(localStorage.getItem('sidebarDropdownOpen') === 'true');
    
    // 获取当前用户信息
    const userPhone = computed(() => auth.currentUser.value || '未登录');

    // 监听路由变化
    watch(
      () => route.path,
      (newPath) => {
        currentRoute.value = newPath;
      }
    );

    const toggleDropdown = () => {
      isDropdownOpen.value = !isDropdownOpen.value;
      // 保存状态到localStorage
      localStorage.setItem('sidebarDropdownOpen', isDropdownOpen.value);
    };

    // 导航方法
    const navigateTo = (path) => {
      router.push(path);
    };
    
    // 注销方法
    const logout = () => {
      auth.logout();
    };

    onMounted(() => {
      currentRoute.value = route.path;
    });

    return {
      currentRoute,
      navigateTo,
      isDropdownOpen,
      toggleDropdown,
      logout,
      userPhone
    };
  }
};
</script>

<style scoped>
.sidebar {
  background-color: #6C85A4;
  width: 200px;
  min-height: 100vh;
  height: 100%;
  padding-top: 0;
  border-top-right-radius: 50px;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
}

.sidebar-top-space {
  height: 80px; /* 添加顶部空间，防止蓝色背景超出圆角 */
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  margin-bottom: 5px;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-item-dropdown {
  color: white;
}

.dropdown-content {
  padding-left: 20px;
}

.dropdown-item {
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-item.active {
  background-color: #1976D2;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-item.active {
  background-color: #1976D2;
}

.dropdown-arrow {
  margin-left: auto;
  transition: transform 0.3s ease;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

.icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  filter: brightness(0) invert(1); /* 确保图标是白色 */
}

span {
  font-size: 16px;
}

/* 用户信息样式 */
.user-info {
  margin-top: auto;
  padding: 20px;
  color: white;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 14px;
}

.user-phone {
  margin-top: 5px;
  font-size: 12px;
  opacity: 0.8;
}
</style>